<template>

    <div class="table_1">
      <!-- <el-form  ref="formData3" :model="formData3"> -->
       
      <div v-for="(item,index) in powerAttrList"
            :key="item.key" style="margin-bottom: 30px;" >
        <div class="table_title td_color">{{ item.clientType==1 ? "借款人" : "共借人"}}征信 -- {{item.borrowerName}}</div>
        
      <table class="table_wrap"> 
        <tbody>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              贷款征信
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                未结清贷款总额度
            </td>
            <td class="table_td">
              <el-input v-model="item.totalOutstandingLoan" maxlength="11" @input="numValid('totalOutstandingLoan',index)" placeholder="未结清贷款总额度">
                  <template slot="append">元</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                未结清贷款笔数
            </td>
            <td class="table_td">
              <el-input v-model="item.numberOutstandingLoan" maxlength="4" @input="integerValid('numberOutstandingLoan',index)" placeholder="未结清贷款笔数">
                  <template slot="append">笔</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                未结清贷款月还款金额
            </td>
            <td class="table_td">
              <el-input v-model="item.outstandingRepayAmount" maxlength="11" @input="numValid('outstandingRepayAmount',index)" placeholder="未结清贷款月还款金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              信用卡信息
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                信用卡张数
            </td>
            <td class="table_td">
              <el-input v-model="item.creditNumber" maxlength="4" @input="integerValid('creditNumber',index)" placeholder="请输入张数">
                  <template slot="append">张</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                信用卡授信总额度
            </td>
            <td class="table_td">
              <el-input v-model="item.creditTotalAmount" maxlength="11" @input="numValid('creditTotalAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                已使用信用卡金额
            </td>
            <td class="table_td">
              <el-input v-model="item.creditUseAmount" maxlength="11" @input="numValid('creditUseAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                使用率
            </td>
            <td class="table_td  td_align">
                {{item.creditUseRate == "" || item.creditUseRate == undefined?'-':isNaN(item.creditUseRate)?'-':item.creditUseRate+'%'}}
            </td>
            <td class="table_td td_color" colspan="2">
                近6个月平均使用额度
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlySixAvgUseAmount" maxlength="11" @input="numValid('nearlySixAvgUseAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近6个月平均使用率
            </td>
            <td class="table_td td_align">
              {{item.nearlySixAvgUseRate == "" || item.nearlySixAvgUseRate == undefined?'-':isNaN(item.nearlySixAvgUseRate)?'-':item.nearlySixAvgUseRate+'%'}}
            </td>
          </tr>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              征信汇总
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                近2年内逾期累计次数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyTwoOverdueNumber" maxlength="4" @input="integerValid('nearlyTwoOverdueNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近2年内逾期最高期数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyTwoOverdueHighestStage" maxlength="4" @input="integerValid('nearlyTwoOverdueHighestStage',index)" placeholder="请输入期数">
                  <template slot="append">期</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近2年内逾期最高金额
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyTwoOverdueHighestAmount" maxlength="11" @input="numValid('nearlyTwoOverdueHighestAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                近1年内逾期累计次数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyOneOverdueNumber" maxlength="4" @input="integerValid('nearlyOneOverdueNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近1年内逾期最高期数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyOneOverdueHighestStage" maxlength="4" @input="integerValid('nearlyOneOverdueHighestStage',index)" placeholder="请输入期数">
                  <template slot="append">期</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近1年内逾期最高金额
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyOneOverdueHighestAmount" maxlength="11" @input="numValid('nearlyOneOverdueHighestAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                近6个月内逾期累计次数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlySixOverdueNumber" maxlength="4" @input="integerValid('nearlySixOverdueNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近6个月内逾期最高期数
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlySixOverdueHighestStage" maxlength="4" @input="integerValid('nearlySixOverdueHighestStage',index)" placeholder="请输入期数">
                  <template slot="append">期</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近6个月内逾期最高金额
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlySixOverdueHighestAmount" maxlength="11" @input="numValid('nearlySixOverdueHighestAmount',index)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              征信查询次数
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
                近1个月内
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyOneMonthQueryNumber" maxlength="4" @input="integerValid('nearlyOneMonthQueryNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近2个月内
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyTwoMonthQueryNumber" maxlength="4" @input="integerValid('nearlyTwoMonthQueryNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                近3个月内
            </td>
            <td class="table_td">
              <el-input v-model="item.nearlyThreeMonthQueryNumber" maxlength="4" @input="integerValid('nearlyThreeMonthQueryNumber',index)" placeholder="请输入次数">
                  <template slot="append">次</template>
                </el-input>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="2">
              当前是否逾期
            </td>
            <td class="table_td td_color td_align" colspan="12">
               <el-radio-group v-model="item.currentIsOverdue" @change="value => redioChange(value,index)">
                <el-radio  :label="true">是</el-radio>
                <el-radio  :label="false">否</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-for="(data,indexs) in item.overdueDTOS" :key="indexs">
            <td class="table_td td_color" colspan="2">
                当前逾期项目
            </td>
            <td class="table_td">
              <el-input v-model="data.overdueProject" @input="update" placeholder="请输入逾期项目">
                  <!-- <template slot="append">次</template> -->
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                当前逾期金额
            </td>
            <td class="table_td">
              <el-input v-model="data.overdueAmount" maxlength="11" @input="verdueonumValid('overdueAmount',index,indexs)" placeholder="请输入金额">
                  <template slot="append">元</template>
                </el-input>
            </td>
            <td class="table_td td_color" colspan="2">
                当前逾期期数
            </td>
            <td class="table_td td_align"  colspan="1">
              <el-input v-model="data.overdueNumber" maxlength="4" @input="verdueointegerValid('overdueNumber',index,indexs)" placeholder="请输入期数" :style="{width: item.overdueDTOS.length > 1?'76%':'100%','margin-right': '20px'}">
                  <template slot="append">期</template>
                </el-input>
              <el-button v-if="item.overdueDTOS.length > 1" type="text" @click="deleteOverdue(data.id,index,indexs)" icon="el-icon-delete">删除</el-button>
            </td>
<!--             <td class="table_td">
            </td> -->
          </tr>
          <tr  v-if="item.currentIsOverdue == '1'">
            <td class="table_td"  colspan="12">
              <el-button type="text" icon="el-icon-circle-plus" @click="addOverdueDTOS(index)">添加</el-button>
            </td>
          </tr>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              异常情况说明
            </td>
          </tr>
          <tr>
            <td class="table_td td_color" colspan="12">
              <el-input type="textarea" placeholder="请输入异常情况"
                maxlength="100"
                rows="5"
                show-word-limit
                v-model="item.abnormalSituation"
              />
            </td>
          </tr>
          <tr>
            <td class="table_td td_color td_align" colspan="12">
              大数据核对
            </td>
          </tr>
          <tr v-for="(datas,i) in item.bigDataCheckDTOS" :key="datas.id">
            <td  class="table_td td_color">
              {{datas.websiteName}} <br/>
              <el-button @click="targetUrl(datas.websiteUrl)">跳转链接</el-button>
                
            </td>
            <td class="table_td" colspan="11">
              <el-input type="textarea" placeholder="请输入查询情况"
                maxlength="500"
                rows="5"
                show-word-limit
                v-model="datas.websiteDesc"
              />
            </td>
          </tr>
        </tbody>
      </table>
      </div>

      
      <div class="table_1" style="margin-top:30px;">
        <div class="table_title td_color">调查情况说明</div>
         <table class="table_wrap">
          <tbody>
            <tr>
              <td class="table_td td_color">
                <el-input type="textarea" placeholder="请输入调查情况说明"
                  maxlength="100"
                  rows="5"
                  show-word-limit
                  v-model="creditInvestigatorDesc.creditInvestigatorDesc"
                />
              </td>
            </tr>
          </tbody>
         </table>
      </div>
      <!-- </el-form> -->

      <div style="width:400px;margin-top:5%;margin-left:35%;"  >
              <!-- <el-button  type="primary" @click="resetForm" style="width:150px;height:40px;">清空</el-button> v-permission="'system:check-opinion:print'" -->
              <el-button v-permission="'system:credit:edit'" v-if="operationLook === undefined" type="warning" @click="createData" style="width:150px;height:40px;">保存</el-button>
              <el-button v-permission="'system:credit:print'" type="primary" @click="exportData" style="width:150px;height:40px;">打印</el-button>
          </div>
    </div>


    
 

</template>

<script>
import ProjectApprovalHistory from '@/views/task/task_detail/project_approval_history';
import { findByProjectIdNew,addCreditNew,deleteCredit,exportCredit } from '@/api/credit'
import { editReviewNew,findByProjectIdNewReview } from '@/api/review'
export default {
  name: 'add',
  components: {
     ProjectApprovalHistory,
     },
    props:{
      projectId: undefined,
      taskId: undefined,
      operationLook: undefined
    },
  data() {
    return {
      activeIndex: '1',
      name: "11",
      dataForm: {
        projectId:undefined,
        borrowerId: undefined,
        clientType: undefined,
        overdueNumber:undefined,
        loanTotalAmount:undefined,
        loanAmount:undefined,
        loanRemainAmount:undefined,
        queryNumber:undefined,
        nearlySixUseAmount:undefined,
        nearlySixRepaymentAmount:undefined,
        creditTotalAmount:undefined,
        creditUseAmount:undefined,
        abnormalSituation:undefined,
      },
      creditInvestigatorDesc:{
        creditInvestigatorDesc:undefined
      },
      // formData3: {
        powerAttrList: [
          {
            realName: "",
            relation: "",
            mobile: "",
          },
          {
            realName: "",
            relation: "",
            mobile: "",
          },
          {
            realName: "",
            relation: "",
            mobile: "",
          },
        ]
      // },
    }
  },
  computed: {
  },
  created() {
    this.findByProjectId()
    this.findByProjectIdReview()
  },
  methods: {
    findByProjectId() {
      findByProjectIdNew({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.powerAttrList = response.data
            for( let i = 0; this.powerAttrList.length; i++ ) {
                this.powerAttrList[i].taskId = this.taskId
                if(!this.powerAttrList[i].overdueDTOS){
                  this.powerAttrList[i].overdueDTOS = []
                }
            }
          }
            
        })
        .catch(() => {
        })
    },
    findByProjectIdReview() {
      findByProjectIdNewReview({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.creditInvestigatorDesc = response.data
          }
            
        })
        .catch(() => {
        })
    },
    update() {
      this.$forceUpdate()
    },
     targetUrl(url){
       window.open(url)
    },
    stepChange(currentStep){
        this.currentStep = currentStep;
    },
    handleSelect(val){
      this.activeIndex = val
    },
    createData(){
      let data = this.creditInvestigatorDesc;
      if(data.projectId == undefined) {
        data.projectId = this.projectId
      }
      editReviewNew(data).then(res => {
        
          this.findByProjectIdReview()
      })
      addCreditNew(this.powerAttrList)
          .then(response => {
            this.findByProjectId()
            this.$notify.success({
              title: '成功',
              message: '保存成功'
            })
          })
          .catch(response => {
          })
    },
    exportData() {

        exportCredit({projectId: this.projectId})
            .then((res) => {
              // this.$notify.success({
              //   title: '成功',
              //   message: '导出成功'
              // })
              const content = res.data
              window.open(content.fileUrl)
            })
            .catch(response => {
              console.log(response)
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
    },
    resetForm(){
      this.dataForm = {
        projectId:this.projectId,
        overdueNumber:0,
        loanTotalAmount:0,
        loanAmount:0,
        loanRemainAmount:0,
        queryNumber:0,
        nearlySixUseAmount:0,
        nearlySixRepaymentAmount:0,
        creditTotalAmount:0,
        creditUseAmount:0,
        abnormalSituation:'',
      }
    },
    redioChange(val,index) {
      let data = {
				"createTime": "",
				"creditId": "",
				"deleted": true,
				"id": "",
				"overdueAmount": "",
				"overdueNumber": "",
				"overdueProject": "",
				"updateTime": ""
			}
      if(val){
       
      }else{
        
          for(let i=0;i<this.powerAttrList[index].overdueDTOS.length;i++){
            console.log(i,'iiii')
            if(this.powerAttrList[index].overdueDTOS[i].id != "") {
              deleteCredit({'creditOverdueId':this.powerAttrList[index].overdueDTOS[i].id}).then(res => {
                console.log(res)
              })
            }
            setTimeout(()=>{
              let list = this.powerAttrList[index].overdueDTOS.splice(i,1)
              
              this.$nextTick(function () {
        
                this.$set(this.powerAttrList[index],"overdueDTOS",list)
                this.$forceUpdate()
              })
            },500)
            // 
          }
      }
    },
    addOverdueDTOS(index) {
      let data = {
				"createTime": "",
				"creditId": "",
				"deleted": true,
				"id": "",
				"overdueAmount": "",
				"overdueNumber": "",
				"overdueProject": "",
				"updateTime": ""
			}
      let list = []
      if(!this.powerAttrList[index].overdueDTOS) {
        this.powerAttrList[index].overdueDTOS = []
      }else{
        list = this.powerAttrList[index].overdueDTOS
      }
      list.push(data)
      this.$nextTick(function () {
        
        this.$set(this.powerAttrList[index],"overdueDTOS",list)
        this.$forceUpdate()
      })
    },
    deleteOverdue(id,index,indexs) {
      if(id != "") {
        deleteCredit({'creditOverdueId':id}).then(res => {
           this.$notify.success({
                title: '成功',
                message: '删除逾期记录成功'
              })
        })
      }
      this.powerAttrList[index].overdueDTOS.splice(indexs,1)
      this.update();
    },
    verdueonumValid(val,index,indexs) {
      const reg = /[^\d.]/g;
        // 只能是数字和小数点，不能是其他输入
        this.powerAttrList[index].overdueDTOS[indexs][val] = this.powerAttrList[index].overdueDTOS[indexs][val] .replace(reg, "");

        // 保证第一位只能是数字，不能是点
        this.powerAttrList[index].overdueDTOS[indexs][val]  = this.powerAttrList[index].overdueDTOS[indexs][val] .replace(/^\./g, "");
        // 小数只能出现1位
        this.powerAttrList[index].overdueDTOS[indexs][val]  = this.powerAttrList[index].overdueDTOS[indexs][val] 
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        // 小数点后面保留2位
        this.powerAttrList[index].overdueDTOS[indexs][val]  = this.powerAttrList[index].overdueDTOS[indexs][val] .replace(
          /^(\-)*(\d+)\.(\d\d).*$/,
          "$1$2.$3"
        );
        this.update()
    },
      //利用函数传参达到复用，以减少代码量
      verdueointegerValid(val,index,indexs){
        //只能输入数字
        // this.editForm[val] = this.editForm[val].replace(/(^\s*)|(\s*$)/g, "");
        const reg = /[^\d]/g;

        // 只能是数字和小数点，不能是其他输入
        this.powerAttrList[index].overdueDTOS[indexs][val] = this.powerAttrList[index].overdueDTOS[indexs][val].replace(reg, "");

        // 保证第一位只能是数字，不能是点
        this.powerAttrList[index].overdueDTOS[indexs][val] = this.powerAttrList[index].overdueDTOS[indexs][val].replace(/^\./g, "");
      
        this.update()
      },
      //利用函数传参达到复用，以减少代码量
      numValid(val,index){
        //只能输入数字
        // this.editForm[val] = this.editForm[val].replace(/(^\s*)|(\s*$)/g, "");
        const reg = /[^\d.]/g;
        // 只能是数字和小数点，不能是其他输入
        this.powerAttrList[index][val] = this.powerAttrList[index][val].replace(reg, "");

        // 保证第一位只能是数字，不能是点
        this.powerAttrList[index][val] = this.powerAttrList[index][val].replace(/^\./g, "");
        // 小数只能出现1位
        this.powerAttrList[index][val] = this.powerAttrList[index][val]
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        // 小数点后面保留2位
        this.powerAttrList[index][val] = this.powerAttrList[index][val].replace(
          /^(\-)*(\d+)\.(\d\d).*$/,
          "$1$2.$3"
        );
        if(val == 'creditTotalAmount' || val == 'creditUseAmount') {
          if((this.powerAttrList[index].creditTotalAmount != "" && this.powerAttrList[index].creditTotalAmount) || (this.powerAttrList[index].creditUseAmount != "" && this.powerAttrList[index].creditUseAmount)  ) {
            this.powerAttrList[index].creditUseRate = ((this.powerAttrList[index].creditUseAmount/this.powerAttrList[index].creditTotalAmount)*100).toFixed(2)
          }
        }
        if(val == 'creditTotalAmount' || val == 'nearlySixAvgUseAmount') {
          if((this.powerAttrList[index].creditTotalAmount != "" && this.powerAttrList[index].creditTotalAmount) || (this.powerAttrList[index].nearlySixAvgUseAmount != "" && this.powerAttrList[index].nearlySixAvgUseAmount)  ) {
            this.powerAttrList[index].nearlySixAvgUseRate = ((this.powerAttrList[index].nearlySixAvgUseAmount/this.powerAttrList[index].creditTotalAmount)*100).toFixed(2)
          }
        }
      },
      //利用函数传参达到复用，以减少代码量
      integerValid(val,index){
        //只能输入数字
        // this.editForm[val] = this.editForm[val].replace(/(^\s*)|(\s*$)/g, "");
        const reg = /[^\d]/g;

        // 只能是数字和小数点，不能是其他输入
        this.powerAttrList[index][val] = this.powerAttrList[index][val].replace(reg, "");

        // 保证第一位只能是数字，不能是点
        this.powerAttrList[index][val] = this.powerAttrList[index][val].replace(/^\./g, "");
      },
  }
}
</script>

<style>

.table_1 .el-input__inner{
  height:52px;
  line-height: 55px;
  border:0px solid;
}
.table_1 .el-textarea__inner{
  border:0px solid;
}
.table_2 .el-input__inner{
  border:1px solid #DCDFE6;
}
.table_2 .el-input__inner:hover{
  border-color:#C0C4CC;
}

.table_1 .box-card{
  margin-top:30px;
  background-color: #f4f4f4;
}
.table_1 .box-card .el-form-item__content{
  width: 400px;
}

.table_1 {
  background-color: #fff;
  width: 100%;
  font-size: 14px;
}
.table_title{
  background-color: #fff;
  border-top: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  border-left: 1px solid #c7c7c7;
  width: 100%;
  background-color: #fff;
  text-align: center;
  line-height: 50px;
}
.table_wrap{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;

}

.table_td {
  text-align: center;
  line-height: 50px;
  min-width: 90px;
  border: 1px solid #c7c7c7;
}
.td_color{
  background-color: #f4f4f4;
}
.td_align{
  text-align: left;
  padding-left: 17px;
  font-size: 14px;
}

</style>